<template>
  <div class="main">
    <div class="top">
      <div class="img_wrap">
        <img class="img" src="../../assets/img/pluto-feminism-fatal-error.svg">
      </div>
      <div class="word">
        <div class="word_text">高效、智能、卓越</div>
        <div class="word_background"></div>
      </div>
    </div>
    <div class="mid">
        <div class="circle_warp">
          <router-link :to="{name: 'uploadprove',
                             params: {
                                type: 'excel'
                            }}">
            <div class="circle"></div>
            <div class="plusx"></div>
            <div class="plusy"></div>
          </router-link>
        </div>

      <div class="button_warp">
        <div class="left" @click="showDownloadEnsure()">下载样表</div>
        <a :href="properties.exampleurl" target="_blank"
           style="display: none" ref="downloadExcel">阿萨德</a>
        <div class="right" @click="showOperationGuide()">操作指南</div>
        <div class="center"></div>
      </div>
    </div>
    <tip_nochoose :tipfile="certificationOprationGuide"
                  v-if="isShowOperationGuide"
                  @closetip="closeOperationGuide($event)"></tip_nochoose>
    <tip_yesorno v-if="isShowDownloadEnsure"
                 :imgsrc="tip_yesorno_img"
                 :imgwidth="tip_yesorno_width"
                 :imgheight="tip_yesorno_height"
                 :title="tip_yesorno_title"
                 :content="tip_yesorno_content"
                 @closetip_ensure="closeDownloadEnsureAndDownload($event)"
                 @closetip_cancel="closeDownloadEnsure($event)"></tip_yesorno>
    </div>
</template>

<script>
import tipNoChoose from '../../components/public/tip_nochoose'
import tipYesOrNo from '../../components/public/tip_yesorno'
import certificationOprationGuide from '../../static/certification_operationguide.json'
import downloadEnsureImage from '../../assets/img/pluto-searching.svg'
import properties from '../../static/certification_properties.json'
export default {
  name: 'index',
  data () {
    return {
      isShowOperationGuide: false,
      isShowDownloadEnsure: false,
      certificationOprationGuide: certificationOprationGuide,
      tip_yesorno_img: downloadEnsureImage,
      tip_yesorno_width: 139,
      tip_yesorno_height: 116,
      tip_yesorno_title: '是否下载样表？',
      tip_yesorno_content: '样表为excel表格，内含填写规范。',
      properties: properties
    }
  },
  components: {
    tip_nochoose: tipNoChoose,
    tip_yesorno: tipYesOrNo
  },
  methods: {
    showOperationGuide () {
      this.isShowOperationGuide = true
    },
    closeOperationGuide () {
      this.isShowOperationGuide = false
    },
    showDownloadEnsure () {
      this.isShowDownloadEnsure = true
    },
    closeDownloadEnsure () {
      // alert('取消')
      this.isShowDownloadEnsure = false
    },
    closeDownloadEnsureAndDownload () {
      // alert('开始下载')
      this.$refs.downloadExcel.click()
      this.closeDownloadEnsure()
    }
  }
}
</script>

<style lang="scss" scoped>
  .main{
    width: 100%;
    height: 100%;
    background: $background-color;
  }
  .top{
    border-top: px2rem(1) solid transparent;
    .img_wrap{
      /*本来是14的上编剧，分了1px给top作为border*/
      margin: px2rem(13) auto 0;
      /*border: px2rem(2) solid red;*/
      text-align: center;
      .img {
        width: px2rem(201);
        height: px2rem(154);
      }
    }
    .word{
      /*border: px2rem(1) solid red;*/
      position: relative;
      height: px2rem(42);
      .word_text {
        position: relative;
        z-index: 2;
        text-align: center;
        line-height: px2rem(42);
        font-size: px2rem(30);
        color: #000;
        font-weight: 800;
      }
      .word_background {
        position: absolute;
        z-index: 1;
        top: px2rem(29);
        left: 50%;
        transform: translate(-50%);
        margin: 0 auto;
        width: px2rem(179);
        height: px2rem(15);
        background: -webkit-linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right,$gradients-color-lightblue, $gradients-color-deepblue); /* 标准的语法 */
      }
    }
  }
  .mid{
    margin: px2rem(75) auto 0;
    .circle_warp{
      position: relative;
      margin: 0 auto;
      width: px2rem(140);
      /*border: px2rem(2) solid red;*/
      .circle{
        height:px2rem(140);
        width: px2rem(140);
        border-radius: 50%;
        background: -webkit-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(to bottom,#9CDAF9,#965EE8); /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom,#9CDAF9,#965EE8); /* 标准的语法 */
        box-shadow: 0px 0px px2rem(3) px2rem(1) #D5C8F6;
       }
      .plusx {
        position: absolute;
        top: px2rem(68);
        left: px2rem(49);
        width: px2rem(41);
        height: px2rem(3);
        border-radius: px2rem(2);
        background-color: #FFF;
      }
      .plusy{
        position: absolute;
        top: px2rem(49);
        left: px2rem(68);
        width: px2rem(3);
        height: px2rem(41);
        border-radius: px2rem(2);
        background-color: #FFF;
      }
    }
    .button_warp {
      position: relative;
      width: px2rem(214);
      height: px2rem(44);
      margin: px2rem(24) auto;
      /*border: px2rem(2) solid red;*/
      border-radius: px2rem(6);
      background: -webkit-linear-gradient(to right,#5EBBFE,#9378EB); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(to right,#5EBBFE,#9378EB); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(to right,#5EBBFE,#9378EB); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right,#5EBBFE,#9378EB); /* 标准的语法 */
      box-shadow: 0px 0px px2rem(3) px2rem(1) #D5C8F6;
      .left {
        float: left;
        width: px2rem(107);
        height: px2rem(44);
        line-height: px2rem(44);
        text-align: center;
        font-size: px2rem(14);
        /*font-weight: bold;*/
        color: #FFF;
      }
      .right{
        float: left;
        width: px2rem(106);
        height: px2rem(44);
        line-height: px2rem(44);
        text-align: center;
        font-size: px2rem(14);
        /*font-weight: bold;*/
        color: #FFF;
      }
      .center{
        position: absolute;
        top: px2rem(9);
        left: px2rem(106);
        width: px2rem(1);
        height: px2rem(27);
        background: $background-color;
      }
    }
  }

</style>
